<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css有意思</title>
  <style>
    .container {padding: 20px;height: 1000px;}
    .behavior-contain {overscroll-behavior: contain;}
    .dialog {position: fixed;left:10%;top:50%;box-sizing: border-box;margin: 0;width: 80%;height: 100px;overflow-y: auto;}
  </style>
</head>
<body>

  <main class="container">   
      <h4>
        CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为，一般用在滚动到顶部或者底部。
      
      如果我们有一个 fixed 定位的弹出层需要滚动时，当这个弹出层滚动到底时，遮罩层下面的页面也会跟着滑动，体验较差。
      
      我们可以使用 overscroll-behavior: contain 阻止这种行为。
      </h4>   
      <h4>
        可惜的是Safari不支持。如果要兼容，可禁用遮罩层下面页面touch事件，关闭遮罩层的时候恢复touch事件。
      </h4>
  </main>

  <dialog open class="dialog behavior-contain">
    overscroll-behavior 属性有 3 个值：
    
    1. auto - 默认。元素的滚动会传播给祖先元素。
    
    2. contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。注意：overscroll-behavior: contain 在
    html 元素上使用可防止滚动导航操作。
    
    3. none - 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）。
  </dialog>
  
</body>
</html>